<template>
  <div class="hlxq_one_box flex1" id="chartsThree"></div>
</template>

<script>
  import echarts from 'echarts'
export default {
  name: 'chartsThree',
  data() {
    return {
    }
  },
  mounted() {
    this.charts()

  },
  methods: {
    charts() {
      let myChart = echarts.init(document.getElementById('chartsThree'))
      myChart.setOption({
        tooltip: { // 提示框
          trigger: 'axis', // 触发类型
          axisPointer: { // 坐标轴指示器配置项
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff' // 坐标字体颜色
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff' // x坐标轴颜色
            }
          },
          data: ['10月', '11月', '12月', '1月', '2月', '3月','4月',"5月"]
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#60707F' // y轴颜色
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#60707F'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#60707F'
            }
          }
        },
        series: [{
          data: [0,0,3825, 530, 547, 821, 1139,945],
          type: 'line',
          symbol: 'circle', //标记的图形
          symbolSize: 6, // 拐点的大小
          itemStyle: {
            normal: {
              borderColor: '59F9FA', // 边框颜色
              color: '#59F9FA', // 折线上标记点的颜色 和 图例的颜色
              lineStyle: {
                width: 1, //  折线图的粗细
                color: '#59F9FA' // 折线的颜色
              }
            }
          },
          areaStyle: {
            normal: {
              type: 'default',
              color: new echarts.graphic.LinearGradient(50, 104, 155, 0.4, [{
                offset: 0,
                color: '#32689B' // 区域颜色
              }, {
                offset: 1,
                color: '#32699E' // 区域颜色
              }], false)
            }
          }
        }]
      })
    }
  }
}
</script>

<style scoped>
.hlxq_one_box{
  width: 95%;
  height: 90%;
  position: absolute;
  left: 1rem;
  top: 1.5rem;
}
</style>
